<div class="off-sidebar-container">
    <header class="off-sidebar-header">
        <ul class="button-nav nav nav-tabs mt-3 mb-3 ml-3" role="tablist" id="weather-tab">
            <li><a class="active" data-toggle="tab" href="#setting" role="tab" id="setting-tab"><span class="translate" translateFor="offside.setting"></span></a></li>
            <li><a data-toggle="tab" href="#continued" role="tab" id="continued-tab"><span class="translate" translateFor="offside.continued"></span></a></li>
        </ul>
        <a href="javascript:void(0);" class="off-sidebar-close"></a>
    </header>
    <div class="off-sidebar-content offcanvas-scroll auto-scroll">
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane show active fade" id="setting" aria-labelledby="setting-tab">
                <div class="sidebar-heading pt-2"><span class="translate" translateFor="offside.lang"></span></div>
                <div class="quick-settings mt-3 mb-3">
                    <ul class="list-group w-100">
                        <li class="list-group-item">
                            <div class="media">
                                <div class="media-body align-self-center">
                                    <span class="text-dark ml-3">简体中文</span>
                                </div>
                                <div class="media-right align-self-center mr-3">
                                    <button type="button" class="switch switch-style-3 lang-zh-switch-btn"></button>
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <div class="media">
                                <div class="media-body align-self-center">
                                    <span class="text-dark ml-3">English</span>
                                </div>
                                <div class="media-right align-self-center mr-3">
                                    <button type="button" class="switch switch-style-3 lang-en-switch-btn"></button>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="sidebar-heading pt-2"><span class="translate" translateFor="offside.theme"></span></div>
                <div class="quick-settings mt-3 mb-3">
                    <ul class="list-group w-100">
                        <li class="list-group-item">
                            <div class="media">
                                <div class="media-body align-self-center">
                                    <span class="text-dark ml-3"><span class="translate" translateFor="offside.light"></span></span>
                                </div>
                                <div class="media-right align-self-center mr-3">
                                    <button type="button" class="switch switch-style-3 theme-switch-btn">
                                        <span class="switch-inner translate lang" translateFor="offside.lightMap" value></span>
                                    </button>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="sidebar-heading pt-2"><span class="translate" translateFor="offside.layout"></span></div>
                <div class="today-stats mt-3 mb-3">
                    <div class="row pt-2">
                        <div class="img-layout-left">
                            <div class="img-layout-disabled layout-left"></div>
                            <div class="styled-checkbox2">
                                <input type="checkbox" id="cb-layout-left"/>
                                <label for="cb-layout-left" id="label-cb-layout-left"></label>
                            </div>
                        </div>
                        <div class="img-layout-top">
                            <div class="img-layout-disabled layout-top"></div>
                            <div class="styled-checkbox2">
                                <input type="checkbox" id="cb-layout-top"/>
                                <label for="cb-layout-top" id="label-cb-layout-top"></label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="continued" aria-labelledby="continued-tab">
                <span class="off-sidebar-header translate" translateFor="offside.continued"></span>
            </div>
        </div>
    </div>
</div>